<template>
  <div class="main">
    <!-- 1.面包屑 -->
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">酒店</el-breadcrumb-item>
        <el-breadcrumb-item
          ><a href="/">{{ alldata.real_city }}酒店</a></el-breadcrumb-item
        >
        <el-breadcrumb-item> {{ alldata.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 大标题 -->
    <div class="bigtitle">
      {{ alldata.name }}
      <i class="iconfont iconhuangguan" v-if="this.levels >= 5"></i>
      <i class="iconfont iconhuangguan" v-if="this.levels >= 4"></i>
      <i class="iconfont iconhuangguan" v-if="this.levels >= 3"></i>
      <i class="iconfont iconhuangguan" v-if="this.levels >= 2"></i>
      <i class="iconfont iconhuangguan" v-if="this.levels >= 1"></i>
    </div>
    <!-- 拼音标题 title-->
    <div class="title">
      <!-- jin jiang zhi xing (shang hai min hang wu jing dian) -->
      {{ alldata.alias }}
    </div>
    <!-- 地址 -->
    <div class="address">
      <i class="el-icon-location"></i> {{ alldata.address }}
    </div>
    <!-- 图片 -->
    <div class="tupian">
      <el-row type="flex" class="row-bg">
        <el-col :span="16"
          ><div class="grid-content bg-purple">
            <img
              src="http://157.122.54.189:9093/images/hotel-pics/1.jpeg "
              alt="锦江之星(吴泾店)"
              height="360px"
              width="640px"
            /></div
        ></el-col>
        <el-col :span="8">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <img
                src="http://157.122.54.189:9093/images/hotel-pics/1.jpeg"
                alt="锦江之星(吴泾店)"
                height="110px"
              /></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <img
                src="http://157.122.54.189:9093/images/hotel-pics/2.jpeg"
                alt="锦江之星(吴泾店)"
                height="110px"
              />
            </div>
          </el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <img
                src="http://157.122.54.189:9093/images/hotel-pics/2.jpeg"
                alt="锦江之星(吴泾店)"
                height="110px"
                margin-bottom="10px"
              />
            </div>
          </el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <img
                src="http://157.122.54.189:9093/images/hotel-pics/2.jpeg"
                alt="锦江之星(吴泾店)"
                height="110px"
              />
            </div>
          </el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <img
                src="http://157.122.54.189:9093/images/hotel-pics/2.jpeg"
                alt="锦江之星(吴泾店)"
                height="110px"
              />
            </div>
          </el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <img
                src="http://157.122.54.189:9093/images/hotel-pics/2.jpeg"
                alt="锦江之星(吴泾店)"
                height="110px"
              />
            </div>
          </el-col>
        </el-col>
      </el-row>
    </div>
    <!--表格 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="价格来源" style="width: 33.33%">
        </el-table-column>
        <el-table-column
          prop="bestType"
          label="低价房型"
          style="width: 33.33%"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="price"
          label="最低价格/每晚"
          style="width: 33.33%"
          align="center"
        >
          <template slot-scope="scope">
            <span class="orange">￥</span>
            <span class="orange">{{ scope.row.price }}</span>
            <span>起</span>
            <i class="el-icon-arrow-right orange"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 地图 -->
    <div class="maap">
      <mapDetails :details="location"></mapDetails>
      <!-- <mapDetails :details="alldata"></mapDetails> -->
    </div>
    <!-- 信息 -->
    <div>
      <el-row class="line">
        <el-col :span="4"
          ><div class="grid-content bg-purple">基本信息</div></el-col
        >
        <el-col :span="20" class="gray"
          ><div class="grid-content bg-purple-light">
            <el-col :span="24"
              ><div class="grid-content bg-purple-light">
                入住时间: 14:00之后
              </div></el-col
            ><el-col :span="24"
              ><div class="grid-content bg-purple-light">
                离店时间 12:00之前
              </div></el-col
            ><el-col :span="24"
              ><div class="grid-content bg-purple-light">
                {{ alldata.creation_time }}/{{ alldata.renovat_time }}
              </div></el-col
            ><el-col :span="24"
              ><div class="grid-content bg-purple-light">
                酒店规模: {{ alldata.roomCount }}间客房
              </div></el-col
            >
          </div></el-col
        >
      </el-row>

      <el-row class="line">
        <el-col :span="4"
          ><div class="grid-content bg-purple">主要设施</div></el-col
        >
        <el-col :span="20"
          ><div class="grid-content bg-purple-light">
            <el-button
              type="info"
              plain
              class="button"
              v-for="(item, index) in facilityData"
              :key="index"
            >
              {{ item.name }}</el-button
            >
          </div></el-col
        >
      </el-row>
      <el-row class="line">
        <el-col :span="4"
          ><div class="grid-content bg-purple">停车服务</div></el-col
        >
        <el-col :span="20"
          ><div class="grid-content bg-purple-light">
            {{ alldata.parking }}
          </div></el-col
        >
      </el-row>
      <el-row class="line">
        <el-col :span="4"
          ><div class="grid-content bg-purple">品牌信息</div></el-col
        >
        <el-col :span="20"
          ><div class="grid-content bg-purple-light">
            {{ hotelbrands.name }}
          </div></el-col
        >
      </el-row>
    </div>
    <!-- 评论 -->
    <div style="margin-top: 40px" class="baba">
      <el-row>
        <el-col :span="24">
          <h4>{{ alldata.all_remarks }}条真实用户评论</h4>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div>总评数: {{ alldata.visits_total }}</div>
          <div>好评数: {{ alldata.very_good_remarks }}</div>
          <div>差评数: {{ alldata.very_bad_remarks }}</div>
        </el-col>
        <el-col :span="5">
          <el-progress
            type="circle"
            :width="80"
            :percentage="100"
            :stroke-width="2"
            status="warning"
            :show-text="false"
            color="#ffeacd"
          >
          </el-progress>
          <el-rate
            class="star"
            v-model="stars"
            disabled
            show-score
            text-color="#ff9900"
          >
          </el-rate>
          <div class="text">推荐</div>
        </el-col>
        <el-col :span="3">
          <el-progress
            type="circle"
            :width="80"
            :percentage="percentage[0]"
            :stroke-width="2"
            status="warning"
            :show-text="false"
          >
          </el-progress>
          <div class="huanjin">
            <div>环境</div>
            <div>{{ score.environment }}</div>
          </div>
        </el-col>
        <el-col :span="3">
          <el-progress
            type="circle"
            :width="80"
            :stroke-width="2"
            :percentage="percentage[1]"
            status="warning"
            :show-text="false"
          >
          </el-progress>
          <div class="chanpin">
            <div>产品</div>
            <div>{{ score.product }}</div>
          </div>
        </el-col>
        <el-col :span="3">
          <el-progress
            type="circle"
            :width="80"
            :stroke-width="2"
            :percentage="percentage[2]"
            status="warning"
            :show-text="false"
          >
          </el-progress>
          <div class="fuwu">
            <div>服务</div>
            <div>{{ score.service }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import mapDetails from "@/components/hotel/mapDetails.vue";
export default {
  components: {
    mapDetails,
  },
  created() {
    this.$axios({
      url: "/hotels/?id=241",
    }).then((res) => {
      console.log(res.data);
      this.alldata = res.data.data[0];
      //表格:价格 房型
      this.tableData = this.alldata.products ? this.alldata.products : [];
      //酒店设施
      this.facilityData = this.alldata.hotelassets
        ? this.alldata.hotelassets
        : [];
      //酒店评分
      this.score = this.alldata.scores ? this.alldata.scores : [];
      //星星评分
      this.stars = this.alldata.stars ? this.alldata.stars : [];
      //酒店品牌
      this.hotelbrands = this.alldata.hotelbrand ? this.alldata.hotelbrand : [];
      //酒店等级
      this.level = this.alldata ? this.alldata : [];

      //传递给地图的当前酒店的定位信息
      this.location = this.alldata.location;
      //酒店评分圆环
      this.percentage.push(
        this.score.environment * 10,
        this.score.product * 10,
        this.score.service * 10
      );
      //酒店等级皇冠
      this.levels = this.alldata.hotellevel
        ? this.alldata.hotellevel.level
        : null;
    });
  },
  data() {
    return {
      //所有数据
      alldata: "",
      //酒店评分
      score: "",
      //酒店品牌
      hotelbrands: "",
      //酒店设施
      facilityData: [],
      //表格:价格 房型
      tableData: [],
      //酒店评分圆环
      percentage: [],
      //酒店评分皇冠
      levels: "",
      activeName: "second",
      //星星
      // value: 0,
      stars: 0,
      location: [],
    };
  },
  mounted() {
    //页面加载完,开始异步引入高德地图
    //创建一个回调函数,高德地图加载完毕后会调用
    window.onLoad = function () {
      //所有关于地图的逻辑,全部都要写在这个回调里面,保证高德地图加载完毕
      var map = new AMap.Map("container", {
        //缩放级别
        zoom: 12,
        center: [106.549483, 29.555208], //中心点坐标
      });
      var marker = new AMap.Marker({
        position: new AMap.LngLat(106.549483, 29.555201), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "重庆希尔顿酒店",
      });
      // 添加到地图当中
      map.add(marker); //添加到地图
    };
    //api地址
    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=ee3f5783511d84dfabd6f4c71cee0a12&callback=onLoad";
    //创建一个script dom元素
    var jsapi = document.createElement("script");
    //设定script标签属性
    jsapi.charset = "utf-8";
    jsapi.src = url;
    //将api文件引入到页面中,加载完毕后会调用回调函数onLoad
    document.head.appendChild(jsapi);
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 1000px;
  margin: 20px auto;
}
.el-breadcrumb {
  padding: 20px 0;
}
.title {
  color: #666;
  font-size: 14px;
}
.address {
  color: #666;
}
.bigtitle {
  color: #333;
  font-weight: 400;
  font-size: 26px;
}
.bg-purple > img {
  margin-bottom: 15px;
}

.tab {
  margin-bottom: 40px;
}
.row-bg {
  margin: 40px 0;
  height: 360px;
}
.grid-content {
  display: flex;
}
#container {
  height: 360px;
  margin-right: 10px;
}
.maap {
  margin: 40px 0;
}
.el-row {
  padding: 20px 10px;
}
.line {
  border-bottom: 1px solid #ccc;
}
.gray {
  color: #666;
  font-size: 14px;
}
.button {
  padding: 4px 10px;
}
.el-tab-pane {
  width: 310px;
}
// 去掉表格单元格边框
/deep/.el-table__row td {
  border: 0;
}
.baba {
  position: relative;
}
.huanjin {
  color: rgb(255, 153, 0);
  position: absolute;
  top: 44px;
  left: 402px;
  width: 32px;
  height: 21px;
  text-align: center;
}
.chanpin {
  color: rgb(255, 153, 0);
  position: absolute;
  top: 44px;
  left: 525px;
  width: 32px;
  height: 21px;
  text-align: center;
}
.fuwu {
  color: rgb(255, 153, 0);
  position: absolute;
  top: 44px;
  left: 648px;
  width: 32px;
  height: 21px;
  text-align: center;
}
.star {
  position: absolute;
  top: 44px;
  left: 163px;
}
.text {
  position: absolute;
  left: 176px;
  top: 23px;
  font-size: 26px;
  text-align: center;
  line-height: 70px;
  width: 70px;
  height: 70px;
  color: rgb(255, 153, 0);
  opacity: 0.25;
  transform: rotate(-30deg);
}
.iconhuangguan {
  color: rgb(255, 153, 0);
}
.orange {
  font-size: large;
  color: rgb(255, 153, 0);
}
</style>